/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view>
		<view class="bar-item" :class="[check?'bar-check':'']">
		    <view class="line" v-if="!noline"></view>
		    <view class="tips-wrap">
		        <view v-if="title" class="tips">{{title}}</view>
		    </view>
		    <view class="bar-ico">
		        <image class="wh100 bar-s" :src="imgUrl+'user/ico-bar-s.png'"></image>
		        <image class="wh100 bar-f" :src="imgUrl+'user/ico-bar-f.png'"></image> 
		    </view>
		    <view class="bar-steps">{{state}}</view>
		</view>
		<view>
			
			
		</view>
	</view>
</template>

<script>
	import config from "@/api/config";
	export default {
		
		props:{
			check:Boolean,
			noline:Boolean,
			title:String,
			state:String,
			
		},
		data() {
			return {
				imgUrl:config.imgUrl
			}
		},
		onLoad(){
			// console.log(this.props.postTitle)
		},
		methods: {
			
		}
	}
</script>

<style>
/* 进度条 */
	.progress-bar-list{
	    width: 100%;
	    height:160rpx;
	    padding: 30rpx 0;
	    border-top: 1px solid #f3f3f3;
	    border-bottom: 1px solid #f3f3f3;
	    display: flex;
	    background-color: #fff;
	}
	.bar-item{
	    width: 150rpx;
	    height: 160rpx;
	    position: relative;
	}
	.tips-wrap{
	    height: 66rpx;
	}
	.bar-item .tips{
	    position: relative;
	    width: 108rpx;
	    height: 36rpx;
	    line-height: 36rpx;
	    text-align: center;
	    font-size: 24rpx;
	    color: #fff;
	    background-color: #50c65f;
	    border-radius: 18rpx;
	    margin:0 auto;
	}
	.bar-item .tips::before{
	    content: '';
	    position: absolute;
	    right: 35rpx;
	    bottom: -20rpx;
	    width: 0;
	    height: 0;
	    border: 10rpx solid transparent;
	    border-top-color: #50c65f;
	}
	.bar-ico{
	    width: 44rpx;
	    height: 44rpx; 
	    margin: 0 auto;
	}
	.bar-s{
	    display: none;
	}
	.bar-steps{
	    width: 100%;
	    text-align: center;
	    height: 50rpx;
	    line-height: 50rpx;
	    font-size:24rpx;
	    color: #ccc;
	}
	.line{
	    position: absolute;
	    top: 85rpx;
	    right: 114rpx;
	    width: 72rpx;
	    height: 6rpx;
	    background-color: #ccc;
	    border-radius: 3rpx;
	}
	.bar-check .bar-s{
	    display: block;
	}
	.bar-check .bar-f{
	    display: none;
	}
	.bar-check .bar-steps{
	    color: #50c65f;
	}
	.bar-check .line{
	    background-color: #50c65f;
	}
	.notice{
	    margin-top: 20rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	    padding: 30rpx;
	}
	.inputs{
	    border:1rpx  solid #f3f3f3;
	    border-radius:5px;
	    font-size:24rpx;
	    padding:0 5px;
	    text-align: center;
	    float: right;
	    width: 150rpx;
	}
</style>
